<template>
  <div>
    <h2>借款页面</h2>
    <table class="table table-bordered">
      <thead>
        <tr>
          <td>借款款项名称</td>
          <td>{{ sdate.JXName }}</td>
        </tr>
        <tr>
          <td>最高金额</td>
          <td>{{ sdate.JXMaxMoney }}</td>
        </tr>
        <tr>
          <td>利息</td>
          <td>{{ sdate.JXYear }}年{{ sdate.JLLiXi * 100 }}%</td>
        </tr>
        <tr>
          <td>借款金额</td>
          <td><input type="text" v-model="money" /></td>
        </tr>
        <tr>
          <td>每月还款金额</td>
          <td>
            {{ (((money * sdate.JLLiXi) / 12) * sdate.JXYear).toFixed(2) }}
          </td>
        </tr>
        <tr>
          <td></td>
          <td><input type="button" value="借款" @click="add" /></td>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
import { useUserStore } from '../Store/user';
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();

let data: any = reactive({
  sdate: [],
  money: 0
});
let { sdate, money } = toRefs(data);

onMounted(() => {
  Show();
});
const Show = () => {
  console.log(userStore.userInfo.UId);
  axios({
    url: 'http://localhost:58457/api/User/jiekYemian',
    method: 'get',
    params: {
      JXId: route.query.JXId
    }
  })
    .then((res) => {
      console.log(res);
      sdate.value = res.data.data[0];
    })
    .catch((err) => {
      console.log(err);
    });
};

const add = () => {
  axios({
    url: 'http://localhost:58457/api/User/JIeKe',
    method: 'post',
    data: {
      JXId: route.query.JXId,
      JXName: sdate.value.JXName,
      JXMaxMoney: sdate.value.JXMaxMoney,
      JXYear: sdate.value.JXYear,
      JLLiXi: sdate.value.JLLiXi,
      JKMoney: money.value,
      UId: userStore.userInfo.UId
    }
  })
    .then((res) => {
      console.log(res);
      if (res.data.data > 0) {
        alert('借款成功');
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
